<template>
  <div class="mine-container">
    <top-bar>
      <p slot="title">登录</p>
      <p slot="right"></p>
    </top-bar>
    <div class="content">
      <div class="logo">
        <img src="../../static/img/logo.jpg">
      </div>
      <section class="input-wrapper">
        <input class="input" type="text" name="username" v-model="userName" placeholder="请输入用户名"/>
        <input class="input" type="password" name="passwd" v-model="password" placeholder="请输入密码"/>
      </section>
      <div class="btn" @click="_login">
        登录
      </div>
    </div>
    <div class="register">
      <router-link to="/register">
        注册
      </router-link>
    </div>
    <error-tip :err-msg="alertText" v-if="dialog"></error-tip>
  </div>
</template>

<script>
  import {login} from "../api/ajax";
  import {ERR_OK} from "../api/config";
  import TopBar from "../components/top-bar/top-bar";
  import ErrorTip from "../components/errorTip/errorTip";

  export default {
    name: 'login',
    data () {
      return {
        userName: '',
        password: '',
        dialog: false,
        alertText: ''
      }
    },
    created () {
    },
    computed: {
      checkPhone () {
        return (/^1(3|4|5|7|8)\d{9}$/.test(this.userName))
      }
    },
    methods: {
      _login () {
        login(this.userName, this.password).then((res) => {
          let response = res.data
          if (response.code == ERR_OK) {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.$router.push('/home')
            }, 1000)
          } else {
            this.alertText = response.msg
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          }
        }).catch((err) => {
          this.alertText = '请检查网路'
          this.dialog = true
        })
      }
    },
    components: {
      ErrorTip,
      TopBar
    }
  }
</script>

<style scoped lang="scss">
  @import "../common/sass/mixin";
  .mine-container{
    text-align: center;
    background-color: white;
    .content{
      margin-top: 90px;
      .logo{
        height: 270px;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          height: 146px;
          width: 146px;
        }
      }
      .input-wrapper{
        padding: 0 36px;
        .input{
          width: 100%;
          outline: none;
          @include font-dpr(28px);
          line-height: 80px;
          border: 1px solid #f8f8f8;
          padding: 0 28px;
          margin: 16px 0;
          @include placeholderStyle;
          color: #000000;
        }
      }
      .btn{
        line-height: 80px;
        margin: 40px 36px;
        @include font-dpr(28px);
        color: #ffffff;
        text-align: center;
        background-color: $btnCor;
        border-radius: 10px;
        &:active{
          background-color: $btnActiveCor;
        }
      }
    }
    .register{
      position: absolute;
      bottom: 80px;
      right: 0;
      left: 0;
      text-align: center;
      @include font-dpr(28px);
      a{
        color: $btnCor;
      }
    }
  }

</style>
